window.addEventListener("load", function () {
	// 功能三:返回顶部按钮
	// 获取返回顶部按钮节点
	$(".returntop");
	// 让按钮默认隐藏
	$(".returntop").style.display = "none";
	//给window添加滚动事件
	this.window.addEventListener("scroll", function () {
		// 定义变量st接根节点距离顶部的距离数值
		let st = document.documentElement.scrollTop;
		// 判断变量st是否大于500
		if (st > 500) {
			// 大于返回顶部按钮显示
			$(".returntop").style.display = "block";
		} else {
			// 不大于返回顶部按钮隐藏
			$(".returntop").style.display = "none";
		}
	});
	// 给节点绑定点击事件
	$(".returntop").addEventListener("click", function () {
		// 点击返回顶部
		window.scrollTo({ left: 0, top: 0, behavior: "smooth" });
	});

	// 功能七:分页器
	// 获取对应节点伪数组
	$(".pages li");
	// 遍历伪数组
	$(".pages li").forEach(function (v) {
		v.addEventListener("click", function () {
			$(".pages li").forEach(function (v) {
				// v.style.background = "#fff";
				// v.style.color = "#000";
				v.classList.remove("active");
			});
			// this.style.transition = "all 1s";
			// this.style.background = "#00bdff";
			// this.style.color = "#fff";
			v.classList.add("active");
			render(Number(v.textContent), 5, listDataArr);
		});
	});

	//功能八:动态渲染API分类
	let apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];
	// 定义变量等于空字符串来接html结构
	let html = "";
	//遍历对象
	apiTypeData.forEach(function (v, i) {
		if (i === 0) {
			html += `<li class="active" title="${v.keyword}">${v.name}</li>`;
		}
		if (i > 0) {
			if (v.isnew) {
				html += `<li class="fw-bold" title="${v.keyword}">${v.name}</li>`;
			} else {
				html += `<li title="${v.keyword}">${v.name}</li>`;
			}
		}
	});
	$(".API-list").innerHTML = html;

	// 功能十:cards列表动态渲染
	let listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南01",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证01",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{
			img: "API_03.jpg",
			name: "天气预报01",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验01",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务01",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南02",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证02",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{
			img: "API_03.jpg",
			name: "天气预报02",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验02",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务02",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南03",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证03",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报03", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验03",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务03",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南04",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证04",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报04", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验04",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务04",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第五行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南05",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证05",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报05", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验05",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务05",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第六行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南06",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证06",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报06", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验06",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务06",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第七行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南07",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证07",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报07", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验07",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务07",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第八行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南08",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证08",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报08", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验08",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务08",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];

	function render(pagenation, pagesize, arr) {
		let startIndex = (pagenation - 1) * pagesize;
		let page = arr.slice(startIndex, startIndex + pagesize);

		let cardsHtml = "";
		page.forEach(function (v) {
			// console.log(v);
			cardsHtml += `
			${
				v.isSpecial
					? `<li class="tc">
					<div class="choose rel chooseC">
						<img src="../images/${v.img}" alt="图片已损坏" />
						<p class="fz-12">${v.name}</p>
						<p class="${v.isSpecial ? "red" : "green"}">${v.price}</p>
						<span class="abs">申请数据</span>
					</div>
				</li>`
					: `<li class="tc">
					<div class="choose rel">
						<img src="../images/${v.img}" alt="图片已损坏" />
						<p class="fz-12">${v.name}</p>
						<p class="${v.isSpecial ? "red" : "green"}">${v.price}</p>
						<span class="abs">申请数据</span>
					</div>
				</li>`
			}`;
		});
		// console.log($(".bottom-list"));
		$(".bottom-list").innerHTML = cardsHtml;
	}
	render(1, 5, listDataArr);
	// 功能九:分类点击事件
	// 获取对应节点伪数组
	$(".API-list li");
	/* $(".API-list li")[0].style.border = "1px solid #00bdff";
	$(".API-list li")[0].style.color = "#00bdff"; */
	// 遍历伪数组
	//-------------------------------------------------------------------------------------
	// classList需要掌握的方法
	// 新增(add),删除(remove),判断包含(contains)  --  包含返回true,不包含返回false
	//-------------------------------------------------------------------------------------

	sNode = $(".bottom-top strong");

	$(".API-list li").forEach(function (v) {
		v.addEventListener("click", function () {
			$(".API-list li").forEach(function (v) {
				// 方法一:直接改对应的样式
				/* v.style.border = "1px solid #dddddd";
				v.style.color = "#666666"; */

				// 方法二:改calssList的删除和增加
				v.classList.remove("active");
			});
			// 方法一:直接改对应的样式
			/* this.style.border = "1px solid #00bdff";
			this.style.color = "#00bdff"; */

			// 方法二:改calssList的删除和增加
			v.classList.add("active");

			$(".bottom-top strong").textContent = v.textContent;
			$(".bottom-top input").value = v.title;
		});
	});

	/* // 登陆模态框
	$(".header div a:first-child").addEventListener("click", function () {
		$(".login").style.display = "inline-flex";
	}); */

	// 点击申请数据弹出模态框
	$(".bottom-list");
	$(".bottom-list").addEventListener("click", function (event) {
		// console.log(111);
		// console.log(event.target.localName);
		if ((event.target.localName = "span")) {
			$(".login").style.display = "inline-flex";
			document.body.style.overflow = "hidden";
			event.preventDefault();
		}
	});
});

// 登陆模块
$(".login li");
// 遍历伪数组
$(".login li").forEach(function (v) {
	console.log(111);
	v.addEventListener("click", function () {
		$("li").forEach(function (v) {
			v.classList.remove("active");
		});
		v.classList.add("active");
		if (v.textContent === "扫码登陆") {
			$(".scan").style.opacity = 1;
			$(".scan").style.zIndex = 1;
		} else {
			$(".scan").style.opacity = 0;
			$(".scan").style.zIndex = -1;
		}
	});
});
// 登陆模态框
$(".login .close").addEventListener("click", function () {
	$(".login").style.display = "none";
});
// $(".login").addEventListener("click", function (e) {
// 	$(".login").style.display = "none";
// 	e.stopPropagation();
// });

$(".returntop");
// 让按钮默认隐藏
$(".returntop").style.display = "none";
//给window添加滚动事件
this.window.addEventListener("scroll", function () {
	// 定义变量st接根节点距离顶部的距离数值
	let st = document.documentElement.scrollTop;
	// 判断变量st是否大于500
	if (st > 500) {
		// 大于返回顶部按钮显示
		$(".returntop").style.display = "block";
	} else {
		// 不大于返回顶部按钮隐藏
		$(".returntop").style.display = "none";
	}
});
// 给节点绑定点击事件
$(".returntop").addEventListener("click", function () {
	// 点击返回顶部
	window.scrollTo({ left: 0, top: 0, behavior: "smooth" });
});
